<template>
  <div class="content">
    <div
      class="title font-16 font-bold"
      v-text="'OTC记录'"
    ></div>
    <div class="table-wrap">
      <el-table
        v-loading='showLoading'
        max-height='500'
        :header-cell-style="{'background-color':'#303030','font-weight':'bold'}"
        :data='myEnstrumentData'
      > 
        <el-table-column
          :label='"时间"'>
          <template slot-scope="scope">
            {{scope.row.wdate}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"币种"'>
          <template slot-scope="scope">
            {{scope.row.coin}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"数量"'>
          <template slot-scope="scope">
            {{scope.row.number}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"单价"'>
          <template slot-scope="scope">
            {{scope.row.price}}
          </template>
        </el-table-column>
        <el-table-column
          sortable
          width='80'
          :label='$t("type")||"类型"'
        >
          <span
            slot-scope="scope"
            :class="scope.row.type==0?'color-danger':'color-success'"
            v-text="scope.row.type=='0'?$t('buy'):$t('sell')"
          ></span>
        </el-table-column>
        <el-table-column
          sortable
          width='80'
          :label='"状态"'
        >
          <span
            slot-scope="scope"
            :class="scope.row.state==0?'color-gold':(scope.row.state=='1'?'color-red':'color-blue')"
            v-text="scope.row.state=='0'?'交易中':(scope.row.state=='1'?'已完成':'已取消')"
          ></span>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.table-wrap {
  // border: $default-border;
  border-bottom: none;
}
.title {
  padding-bottom: 15px;
  margin-bottom: 10px;
  color: #DDDDDD;
  border-bottom: 1px solid #2F2F2F;
}
</style>
<script>
export default {
  data() {
    return {
      showLoading: true,
      myEnstrumentData: []
    };
  },
  mounted() {
    this.request(this.api.getmyotctradbill,{pagesize:'60',pagecode:'1'}).then(res => {
      this.showLoading = false;
      if (res && res.code != "0") {
        this.getDataFaild(res.msg);
        return false;
      }
      res.data && (this.myEnstrumentData = res.data);
    });
  }
};
</script>